<template>
  <div>
    <div>
      <el-alert type="success">通义万相-图片生成模型</el-alert>
    </div>

    <el-card>
    <!--图片列表-->
      <div class="text-parent">
        <el-avatar :src="avatar_tongyi"></el-avatar>
        <span>{{this.question.message}}</span>
      </div>

      <div>
        <el-row :gutter="5">
          <el-col :span="6" v-for="(item,index) in imageList" :key="index">
            <el-image :src="item.url"></el-image>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card style="position: fixed;bottom: 10px;width: 100%">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input v-model="question.message" placeholder="请输入问题"
                    clearable
                    @keyup.enter.native="startCreate"/>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="startCreate">发送</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {tongyiCall, tongyiImage, tongyiTask} from "@/api/ai/tongyi";
import {getToken} from "@/utils/auth";
import {fetchEventSource} from '@microsoft/fetch-event-source';

export default {
  data() {
    return {
      question:{
        user: 'user',
        message: '一个JK女鬼漫步在校园里'
      },
      avatar_tongyi: "https://img.alicdn.com/imgextra/i3/O1CN01sffRIx1nb3dXCKdFC_!!6000000005107-2-tps-1024-1024.png",
      answer: "",
      imageList: [],
      user: 'report',
      eventSource: null,
      infoList:[],
    };
  },
  methods: {
    startCreate() {
      const loading = this.$loading({
        lock: true,
        text: '正在生成图片,请稍等',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      tongyiImage(this.question.message).then((res) => {
        this.imageList = res;
        console.log(this.imageList)

        loading.close();
      });
    },
  },
  mounted() {

  },
  beforeDestroy() {

  }
}
</script>

<style scoped>
.text-parent{
  margin-top: 10px;
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保父元素的高度足够包裹子元素以实现垂直居中 */
}
.el-avatar{
  margin-right: 5px;
}
</style>
